<template>
  <div class="ph48">
    <!-- <div class="tc-l2 mt24">设置此工资表模板参与计薪的工资项目，您可以新增或移除工资表模板的项目。</div> -->
    <div class="flex-center-between mt16">
      <a-input-search v-model="keyword" placeholder="请输入工资项" style="width: 240px" />
      <a-button type="primary" @click="onAdd">
        <a-icon type="plus" />
        添加自定义工资项
      </a-button>
    </div>
    <div class="mt16">
      <a-table
        :scroll="{ x: true, y: true }"
        :dataSource="dataSourceNewFiltered"
        :columns="columns"
        :loading="loading"
        rowKey="id"
        size="middle"
      >
        <template slot="name" slot-scope="text, record">
          {{ text }}
          <a-tooltip v-if="record.remarks" :title="record.remarks">
            <a-icon type="question-circle" theme="filled" class="ml4" />
          </a-tooltip>
          <a-icon v-if="record.canUpdate" type="edit" class="ml12 pointer" style="color: var(--primary)" @click="onEdit(record)" />
        </template>
        <template slot="isOpen" slot-scope="text, record">
          <a-checkbox :disabled="!record.canClose" :checked="text" @change="onOpenChange($event, record.id)" />
        </template>
        <template slot="action" slot-scope="text, record">
          <a-space :size="12">
            <a-popconfirm
              v-if="record.canDelete"
              :title="`确认删除${record.name}项吗，所有用工单位中未归档的月工资表中该项将被同步删除并清空数据`"
              @confirm="doDelete(record.id)"
            >
              <span class="pointer tc-theme">删除</span>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </div>
    <div class="mt16 ta-center pb24">
      <a-space :size="24">
        <a-button @click="$emit('cancel')">取消</a-button>
        <a-button type="primary" @click="$emit('next')">下一步</a-button>
      </a-space>
    </div>
    <a-modal v-model="modalVisible" :title="modalTitle" @cancel="doCancel" @ok="doOk">
      <div v-if="modalVisible === '添加自定义工资项'" class="fs12 tc-l3 mb16">
        添加自定义工资项将同步至所有用工单位，默认不选入工资表模板中，如需使用，请在对应的工资表末班中进行选择
      </div>
      <div v-else class="fs12 tc-l3 mb16">编辑自定义工资像名称，将同步到所有用工单位</div>
      <a-form-item label="工资项名称" required :wrapperCol="{ span: 18 }" :labelCol="{ span: 6 }">
        <a-input v-model="name" placeholder="请输入" style="width: 240px" />
      </a-form-item>
    </a-modal>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  mixins: [],
  props: {
    id: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      dataSource: [],
      columns: [
        { title: "工资表项目", dataIndex: "name", scopedSlots: { customRender: "name" } },
        { title: "是否启用", dataIndex: "isOpen", width: 100, scopedSlots: { customRender: "isOpen" } },
        { title: "操作", dataIndex: "action", width: 60, scopedSlots: { customRender: "action" } }
      ],
      loading: false,
      modalVisible: false,
      modalTitle: "",
      name: "",
      currentItem: null,
      updateDict: {},
      keyword: ""
    };
  },
  computed: {
    dataSourceNew() {
      const lst = this.dataSource.map((item) => {
        return {
          ...item,
          isOpen: this.updateDict[item.id] === true || this.updateDict[item.id] === false ? this.updateDict[item.id] : item.isOpen
        };
      });
      return lst;
    },
    dataSourceNewFiltered() {
      return this.dataSourceNew.filter((item) => item.name.indexOf(this.keyword) >= 0);
    }
  },
  watch: {
    id: {
      handler(newVal) {
        if (newVal) {
          this.loadData();
        }
      },
      immediate: true
    },
    dataSourceNew: {
      handler(newVal) {
        this.$emit(
          "update:wageItemLst",
          newVal.filter((item) => item.isOpen)
        );
      },
      deep: true,
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    doDelete(wageItemId) {
      this.$request({
        url: `/salary/api/v1/wageItems/${wageItemId}`,
        method: "delete"
      })
        .then((res) => {
          this.$message.success("删除成功");
          this.loadData();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onOpenChange(evt, id) {
      this.updateDict = {
        ...this.updateDict,
        [`${id}`]: evt.target.checked
      };
    },
    doCancel() {
      this.modalVisible = false;
      this.modalTitle = "";
      this.name = "";
      this.currentItem = null;
    },
    doOk() {
      if (!this.name) {
        this.$message.warning("内容未填写");
        return false;
      }
      if (this.currentItem) {
        this.$request({
          url: `/salary/api/v1/wageItems`,
          method: "put",
          data: {
            id: this.currentItem.id,
            name: this.name
          }
        })
          .then((res) => {
            this.$message.success("修改成功");
            this.loadData();
            this.doCancel();
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$request({
          url: `/salary/api/v1/wageItems`,
          method: "post",
          data: {
            name: this.name,
            canClose: true,
            canUpdate: true,
            canDelete: true,
            isOpen: true
          }
        })
          .then((res) => {
            this.$message.success("添加成功");
            this.loadData();
            this.doCancel();
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    onAdd() {
      this.modalTitle = "添加自定义工资项";
      this.name = "";
      setTimeout(() => {
        this.modalVisible = true;
      }, 0);
    },
    onEdit(record) {
      this.modalTitle = "编辑自定义工资项";
      this.name = record.name;
      this.currentItem = record;
      setTimeout(() => {
        this.modalVisible = true;
      }, 0);
    },
    loadData() {
      this.loading = true;
      this.$request({
        url: `/salary/api/v1/templateWageItems/selectByNameLike`,
        params: {
          salaryTemplateId: this.id
        }
      })
        .then((res) => {
          this.dataSource = res.data;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    }
  }
};
</script>
<style lang="scss"></style>
